<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			#city {
				height: 45px;
			}
		</style>
	</head>

	<body>

		<h3>天气查询</h3>
		<!-- 按钮触发模态框 -->
		<input type="text" id="city" placeholder="请输入城市" />
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="getWeather()">查询</button>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<!--×按钮-->
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">天气预报</h4>
					</div>
					<div class="modal-body">
						<div id="weather"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<script type="text/javascript">
			function getWeather() {
				var city = document.getElementById("city").value;
				$.get("http://wthrcdn.etouch.cn/weather_mini?city=" + city, function(data) {
					var data = $.parseJSON(data).data;
					var weather = data.forecast;
					console.log(data);
					var html = "";
					for (var i = 0; i < weather.length; i++) {
						var a = weather[i].fengli;
						var b = a.substring(10, 12);
						console.log(b);
						html += "<div>日期：" + weather[i].date + ";" + "天气：" + weather[i].type + "; " + "风向：" + weather[i].fengxiang + "; " + "风力：" + b + "; " + "最高温度：" + weather[i].high + "; " + "最低温度：" + weather[i].low + "; " + "</div>";
					}
					document.getElementById("weather").innerHTML = html;
				});
			}
		</script>
	</body>

</html>